<template>
	<view>
		<view class="body" style="padding-bottom: 48px; background-color: transparent">
			<view class="VerticalBox po_r">
				<scroll-view class="VerticalMain" scroll-y scroll-with-animation>
					<view class="padding-top padding-lr">
						<view v-if="isLoad" :class="isLoad ? 'cu-load bg-grey loading' : 'cu-load bg-grey over'"></view>
						<view class="bg-white radius5" v-else-if="shopList.length == 0">
							<image src="../../static/notfound.png" style="width: 80%; height: 140px" mode="widthFix">
							</image>
						</view>
						<view v-else class="f fv">
							<view class="f fv">
								<checkbox-group @change="checkboxChange">
									<view class="f fac padding-sm items mb_2 width_1 radius5 margin-bottom-sm bg-white"
										v-for="(item, index) in shopList" :key="index">
										<uni-swipe-action>
											<uni-swipe-action-item>
												<view class="f fac width_1">
													<view class="f fac">
														<checkbox :checked="item.checked"
															class="round red" :value="index" />
													</view>
													<image class="margin-lr-sm radius5" :src="item.img"
														style="height: 180rpx; width: 210rpx"></image>
													<view class="item_2 f fv fpj f1 margin-right-sm">
														<view class="f fv text-lg text-black" style="font-weight: 500">
															{{ item.name }} 明前茶新上市精美礼盒装
															<view class="text-sm text-grey">规格：</view>
														</view>
														<view class="f fpj fac">
															<text class="text-price text-red text-lg">{{ item.price }}</text>
															<uni-number-box :min="1" :name="index" :value="item.buyNum" @change="changeStep($event, item)" />
														</view>
													</view>
												</view>
												<template v-slot:right>
																	<view slot="right" style="width: 50px; height: 100%">
																		<view class="f fac fpc bg-red width_1 h1" @tap="del" :data-i="item">
																			移除</view>
																	</view>
																</template>
												
											</uni-swipe-action-item>
										</uni-swipe-action>
									</view>
								</checkbox-group>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="light bg-grey padding-sm f fpj fac"
					style="bottom: 48px; height: 100rpx; width: 100%; position: fixed">
					<view class="f">
						<view class="text-df">
							<checkbox @tap="allChange" class="round red margin-right-xs" :checked="all" />
							全选
						</view>
						<view class="f fv margin-left-sm">
							<view class="f fac text-sm text-black">
								合计：
								<view class="text-price text-red text-lg">{{ total }}</view>
							</view>
							<view class="text-sm text-black">(共{{ totalNum }}件商品)</view>
						</view>
					</view>
					<button class="cu-btn round bg-red shadow" style="margin: 0" @tap="toOrder">去结算</button>
				</view>
			</view>
		</view>
		<!-- <toast class="toast_animate"></toast> -->
	</view>
</template>

// <script>
	// import toast from '../../components/toast3/index';
	// import stepper from '../../components/stepper/index';
	// page/cloud/index.js
	export default {
		data() {
			return {
				shopList: [],
				tabCur: 0,
				isLoad: false,
				all: false,
				total: 0,
				totalNum: 0,
				selected: 0
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			this.reLoad();
			// this.setData({
			//     isLoad: true
			// });
			this.isLoad = true
		},
		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady() {
			// this.toastDialog = this.zpSelectComponent('.toast_animate');
		},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow() {
			//点击tabber,赋当前值
			if (typeof this.getTabBar === 'function' && this.getTabBar()) {
				this.getTabBar().setData({
					selected: 2
				});
			}
			this.shopList = uni.getStorageSync('carInfo')
			let isAll = true;
			let total = 0;
			let totalNum = 0;
			//重新计算是否全选和总价
			if (!this.shopList) {
				return;
			}
			this.shopList.forEach((e) => {
				if (e.checked == false) {
					isAll = false;
				} else {
					total += e.price * e.buyNum;
					totalNum += e.buyNum;
				}
			});
			this.all = isAll
			this.total = total
			this.totalNum = totalNum
		},
		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide() {
			uni.setStorageSync('carInfo', this.shopList);
		},
		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload() {},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh() {},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom() {},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage() {},
		methods: {
			toOrder(options) {
				if (!this.shopList.length) {
					this.showMesErr();
					return;
				}
				let list = [];
				this.shopList.forEach((e) => {
					if (e.checked == true) {
						list.push(e);
					}
				});
				uni.setStorageSync('orderInfo', list);
				uni.navigateTo({
					url: '../order/index?total=' + this.total + '&type=car'
				});
			},

			changeStep(e,i) {
				i.buyNum = e
				let total = 0;
				let totalNum = 0;
				this.shopList.forEach((e) => {
					if (e.checked == true) {
						total += e.price * e.buyNum;
						totalNum += e.buyNum;
					}
				});
				this.total = total
				this.totalNum = totalNum
			},

			reLoad() {
				this.isLoad = true
				setTimeout(() => {
					this.isLoad = false
				}, 800);
			},

			TabSelect(e) {
				this.reLoad();
				this.tabCur = e.currentTarget.dataset.index
			},

			checkboxChange(e) {
				let items = this.shopList;
				let total = 0;
				let totalNum = 0;
				e.detail.value.forEach((ele) => {
					items[ele].checked = true;
					total += items[ele].price * items[ele].buyNum;
					totalNum += items[ele].buyNum;
					
				});
				this.shopList = items
				this.all = (e.detail.value).length == this.shopList.length ? true : false
				this.total = total
				this.totalNum = totalNum
			},

			allChange(e) {
				// 购物车空时，提示错误
				if (this.shopList.length == 0) {
					this.all = false
					this.showMesErr();
					return;
				}
				this.all = !this.all
				let items = this.shopList;
				let total = 0;
				let totalNum = 0;
				for (let index = 0; index < this.shopList.length; index++) {
					total += items[index].price * items[index].buyNum;
					totalNum += items[index].buyNum;
					if (this.all) {
						//全选时，给未选的选中
						items[index].checked = true;
					} else {
						//不全选时，给选中的取消
						items[index].checked = false;
					}
				}
				this.shopList = items
				this.total = this.all ? total : 0
				this.totalNum = this.all ? totalNum : 0
			},

			del(e) {
				let list = this.shopList.filter(function(item) {
					return item.name != e.currentTarget.dataset.i.name;
				});
				let total = 0;
				let totalNum = 0;
				//重新计算选中物品总价
				list.forEach((e) => {
					if (e.checked == true) {
						total += e.price * e.buyNum;
						totalNum += e.buyNum;
					}
				});
				this.shopList = list
				this.total = total
				this.totalNum = totalNum
				this.all = list.length ? this.all : false
				uni.setStorageSync('carInfo', list);
			},
		}
	};
</script>
<style>
	/* @import './index.css'; */
</style>